<template>
  <div class="userBox">
    <div class="left_part">
      <van-image class="avatar" :src="avatar">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <p class="userName">{{ userName }}</p>
      <van-tag round type="primary" size="large">{{ depName }}</van-tag>
    </div>

    <img
      style="width: 24px"
      @click="handleInfo"
      src="@/assets/images/forward.png"
      alt=""
      v-if="isMore"
    />
  </div>
</template>

<script setup>
const emits = defineEmits(['handleInfo']);

const props = defineProps({
  userName: {
    type: String,
    default: '',
  },
  depName: {
    type: String,
    default: '',
  },
  avatar: {
    type: String,
    default: '',
  },
  isMore: {
    type: Boolean,
    default: true,
  },
});

function handleInfo(data) {
  emits('handleInfo', data);
}
</script>

<style scoped lang="scss">
.userBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
  padding: 0 15px;
  .left_part {
    min-width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #ffffff;
      border-radius: 50%;
    }

    .userName {
      width: 45px;
      height: 24px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-right: 40px;
    }
  }
}
</style>
